<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数据库</title>
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<link rel="stylesheet"
	href="../../resource/lib/bootstrap/css/bootstrap.css">
<link rel="stylesheet"
	href="../../resource/lib/bootstrap/css/bootstrap-responsive.css">
<link rel="stylesheet" href="../../resource/stylesheets/theme.css">
<link rel="stylesheet"
	href="../../resource/lib/font-awesome/css/font-awesome.css">

<script src="../../resource/lib/jquery-1.8.1.min.js"></script>
<script src="../../resource/lib/jquery.tmpl.min.js"></script>

<!-- Demo page code -->

<style type="text/css">
#line-chart {
	height: 300px;
	width: 800px;
	margin: 0px auto;
	margin-top: 1em;
}

.brand {
	font-family: georgia, serif;
}

.brand .first {
	color: #ccc;
	font-style: italic;
}

.brand .second {
	color: #fff;
	font-weight: bold;
}
</style>

<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

</head>

<!--[if lt IE 7 ]> <body class="ie ie6"> <![endif]-->
<!--[if IE 7 ]> <body class="ie ie7"> <![endif]-->
<!--[if IE 8 ]> <body class="ie ie8"> <![endif]-->
<!--[if IE 9 ]> <body class="ie ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<body>
	<!--<![endif]-->
	<script include="../commTitleBar.html"></script>

	<div class="container-fluid">
		<div class="row-fluid">
			<div class="span12">
				<div class="stats">
					<p class="stat">
						<span class="number">0</span>请求
					</p>
					<p class="stat">
						<span class="number">0</span>申请
					</p>
					<p class="stat">
						<span class="">2013-09-08</span>最近更新
					</p>
				</div>
				<div class="btn-toolbar">
					<button class="btn btn-primary" id="creatDatabase">
						<i class="icon-plus"></i> 创建数据库
					</button>
				</div>
				<div class="well">
					<table class="table table-striped table-hover">
						<thead>
							<tr>
								<th>数据库</th>
								<th>说明</th>
								<th>时间</th>
								<th>申请</th>
								<th style="width: 46px;">操作</th>
							</tr>
						</thead>
						<tbody id="database"></tbody>
						<script type="text/jquery-tmpl" id="database-tmpl">
							{{each data}}
								<tr {{if !$value.exist}}class="info" title="数据库无此库"{{/if}} {{if $value.id}} data-id="${id}" {{/if}}>
									<td>{{if $value.exist}}
											<a href="database_${id}">${$value.databaseName}</a>
										{{else}}
											<span class="badge badge-warning" title="数据库无此库">${$value.databaseName}</span>
										{{/if}}
									</td>
									<td>${reason}</td>
									<td>${$value.createTime}</td>
									<td>
										<span class="badge {{if $value.applyCount}}badge-warning {{else}} badge-info{{/if}}" 
											style="cursor: pointer;" data-e="applyMsg">
											<i class="icon-envelope"></i> 
											{{if $value.applyCount}}
												<span>${$value.applyCount}</span>
											{{/if}}
										</span>
									</td>
									<td>
										<i class="icon-pencil" style="cursor: pointer;" data-e-operate="BACKUP"></i>
										<i class="icon-remove" style="cursor: pointer;" data-e-operate="DROP"></i>
									</td>
								</tr>
							{{/each}}
						</script>
						
					</table>
				</div>
				<div class="pagination">
					<ul>
						<li><a href="#">Prev</a></li>
						<li><a href="#">1</a></li>
						<li><a href="#">2</a></li>
						<li><a href="#">3</a></li>
						<li><a href="#">4</a></li>
						<li><a href="#">Next</a></li>
					</ul>
				</div>

			</div>
		</div>

		<footer>
			<hr>
			<!-- Purchase a site license to remove this link from the footer: http://www.portnine.com/bootstrap-themes -->
			<p class="pull-right">
				A <a href="http://www.portnine.com/bootstrap-themes" target="_blank">Free
					Bootstrap Theme</a> by <a href="http://www.portnine.com"
					target="_blank">Portnine</a>
			</p>


			<p>
				&copy; 2012 <a href="http://www.portnine.com">Portnine</a>
			</p>
		</footer>
	</div>
	<script include="../dialg.html"></script>
	<script>
		function getOperate(o){
			var json = {
				'CREATE' : "创建",
				'DROP' : "删除",
				'BACKUP' : "备份"
			}
			return json[o];
		}
	</script>
	<script type="text/jquery-tmp" id="applyInfo-tmpl">
		<div class="block" {{if status=='SUCCESS'}}style="background-color: rgb(237, 245, 236);"{{else status=='FAIL'}}style="background-color: rgb(250, 229, 231);"{{/if}}>
		    <p class="block-heading">
				${applyName}申请${getOperate(operate)}数据库 
			</p>
		    <div class="block-body">
		    <div class="row-fluid" data-id="${id}">
		        <p>申请时间：${createTime}</p>
		        <p>申请原因：${reason}</p><hr style="margin: 5px 0;"/>
				{{if status=='SUCCESS'}}
					<span class="badge badge-info">已执行</span>
				{{else status=='FAIL'}}
					<span class="badge badge-error">未通过</span>
				{{else}}
			        <button class="btn btn-primary" data-type="SUCCESS">同意</button>
					<button class="btn"  data-type="FAIL">取消</button>
				{{/if}}
		        <div class="clearfix"></div>
		        </div>
		    </div>
		</div>
	</script>
	<!-- Le javascript
    ================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="../../resource/lib/bootstrap/js/bootstrap.js"></script>
	<script src="../../resource/js/database.js"></script>
	<script type="text/javascript">
		function callback(json){
			load(json);
		}
	</script>
</body>
</html>


